<template>
  <div class="lg:flex">
    <Avatar :src="userinfo.avatar || headerImg" :size="72" class="!mx-auto !block" />
    <div class="md:ml-6 flex flex-col justify-center md:mt-0 mt-2">
      <h1 class="md:text-lg text-md">{{getTimeState()}} {{ userinfo.name }}</h1>
      <span class="text-secondary"> {{ tip() }}</span>
    </div>
    <div class="flex flex-1 justify-end md:mt-0 mt-4">
      <!-- <div class="flex flex-col justify-center text-right">
        <span class="text-secondary"> 待办 </span>
        <span class="text-2xl">2/10</span>
      </div>

      <div class="flex flex-col justify-center text-right md:mx-16 mx-12">
        <span class="text-secondary"> 项目 </span>
        <span class="text-2xl">8</span>
      </div>
      <div class="flex flex-col justify-center text-right md:mr-10 mr-4">
        <span class="text-secondary"> 团队 </span>
        <span class="text-2xl">300</span>
      </div> -->
    </div>
  </div>
</template>
<script lang="ts" setup>
import { Avatar } from 'ant-design-vue';
import { computed } from 'vue';
import XEUtils from "xe-utils";
import headerImg from '/@/assets/images/header.jpg';
import { useUserStore } from '/@/store/modules/user';

const userStore = useUserStore();
const userinfo = computed(() => userStore.getUserInfo);

const tip = () => {
  var date = new Date();
  var day = date.getDay();
  var names = ["周日","周一","周二","周三","周四","周五","周六"];
  return `今天是：${XEUtils.toDateString(new Date(), 'yyyy年MM月dd日')} ${names[day]}`
}

let getTimeState = () => {
  let timeNow = new Date();
  let hours = timeNow.getHours();
  let text = ``;
  if (hours >= 0 && hours < 4) {
    text = `凌晨了，注意休息。`;
  } else if (hours >= 4 && hours <= 10) {
      text = `早上好，`;
  } else if (hours > 10 && hours <= 14) {
      text = `中午好，`;
  } else if (hours > 14 && hours <= 18) {
      text = `下午好，`;
  } else if (hours > 18 && hours <= 24) {
      text = `晚上好，`;
  }
  return text;
};

</script>
